<template>
	<view class="pl10 pr10">
		<view v-if="zmCardData.length>0&&ktCardData.length>0" class="content pl15 pr15">
			<scroll-view scroll-y class="h100p w100p">
				<view v-for="(item, index) in ktCardData" :key="item.id" class="content_item p15 mb15">
					<view class="d-flex">
						<view class="d-flex a-center leftWidth">
							<image style="width: 140rpx; height: 140rpx;" mode="aspectFill"
								:src="ktCardStatus[index]==0?kt_close:kt_open"></image>
						</view>
						<view class="flex-1">
							<view class="h50p d-flex j-sb a-center pl10">
								<view class="d-flex a-center">
									<view class="fs16 fw600 mr5">{{index==0?'1号楼':'2号楼'}}空调使用时段</view>
									<view>
										<u-icon name="calendar" color="#2979ff" size="34" @click="openPopup(item)"></u-icon>
									</view>
								</view>
								<view>
									<ss-switch v-model="item.isUse" :offVal="0" :onVal="1" offText="关" onText="开" color="#bfbfbf"
										selColor="#427aff" @change="asyncSwitchChange($event, item)"></ss-switch>
								</view>
							</view>
						</view>
					</view>
					<view class="d-flex a-center mt10">
						<view class="leftWidth fs14">开启模式：</view>
						<view class="flex-1">
							<uni-data-select v-model="item.model" :localdata="ktOptions"
								@change="selectChange($event, item)"></uni-data-select>
						</view>
					</view>
					<view class="d-flex-center mt10">
						<view class="d-flex a-center mr5">
							<view class="leftWidth fs14">开启时间：</view>
							<view class="flex-1" @click="openTimeFocus(item, 'open')">
								<u--input v-model="item.openTime" :disabled="true" disabledColor="#ffffff" placeholder="选择时间"
									placeholderStyle="color: #909399; font-size: 13px;" suffixIcon="arrow-down"
									suffixIconStyle="color: #909399; font-size: 13px;"></u--input>
							</view>
						</view>
						<view class="d-flex a-center">
							<view class="leftWidth fs14">关闭时间：</view>
							<view class="flex-1" @click="closeTimeFocus(item, 'close')">
								<u--input v-model="item.closeTime" :disabled="true" disabledColor="#ffffff" placeholder="选择时间"
									placeholderStyle="color: #909399; font-size: 13px;" suffixIcon="arrow-down"
									suffixIconStyle="color: #909399; font-size: 13px;"></u--input>
							</view>
						</view>
					</view>
				</view>

				<view v-for="(item, index) in zmCardData" :key="item.id" class="content_item p15 mb15">
					<view class="d-flex">
						<view class="d-flex a-center leftWidth">
							<image style="width: 140rpx; height: 140rpx;" mode="aspectFill"
								:src="zmCardStatus[index]==0?lamp_close:lamp_open"></image>
						</view>
						<view class="flex-1">
							<view class="h50p d-flex j-sb a-center pl10">
								<view class="d-flex a-center">
									<view class="fs16 fw600 mr5">{{index==0?'1号楼':'2号楼'}}照明使用时段</view>
									<view>
										<u-icon name="calendar" color="#2979ff" size="34" @click="openPopup(item)"></u-icon>
									</view>
								</view>
								<view>
									<ss-switch v-model="item.isUse" :offVal="0" :onVal="1" offText="关" onText="开" color="#bfbfbf"
										selColor="#427aff" @change="asyncSwitchChange($event, item)"></ss-switch>
								</view>
							</view>
						</view>
					</view>
					<view class="d-flex-center mt10">
						<view class="d-flex a-center mr5">
							<view class="leftWidth fs14">开启时间：</view>
							<view class="flex-1" @click="openTimeFocus(item, 'open')">
								<u--input v-model="item.openTime" :disabled="true" disabledColor="#ffffff" placeholder="选择时间"
									placeholderStyle="color: #909399; font-size: 13px;" suffixIcon="arrow-down"
									suffixIconStyle="color: #909399; font-size: 13px;"></u--input>
							</view>
						</view>
						<view class="d-flex a-center">
							<view class="leftWidth fs14">关闭时间：</view>
							<view class="flex-1" @click="closeTimeFocus(item, 'close')">
								<u--input v-model="item.closeTime" :disabled="true" disabledColor="#ffffff" placeholder="选择时间"
									placeholderStyle="color: #909399; font-size: 13px;" suffixIcon="arrow-down"
									suffixIconStyle="color: #909399; font-size: 13px;"></u--input>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 10rpx;"></view>
			</scroll-view>
		</view>
		<view v-else class="w100p d-flex-center" style="height: calc(100% - 60px);">
			<noValue></noValue>
		</view>
		<!-- <tab-bar-view :tabCode="'1'"></tab-bar-view> -->

		<!-- 选择时间 -->
		<u-datetime-picker ref="datetimePicker" :show="timeIsShow" v-model="openOrCloseTime" mode="time"
			@cancel="timeIsShow = false" @confirm="confirmDateTime"></u-datetime-picker>

		<!-- 选择星期 -->
		<u-popup :customStyle="{width: '600rpx'}" :show="popupShow" mode="center" :round="10" @close="popupShow = false">
			<view class="p15">
				<view class="">
					<view class="d-flex-center fs16 fw600">执行周期</view>
					<view class="h100p mt15 d-flex-center">
						<view class="width-47">
							<view class="d-flex-center mb15">开始星期</view>
							<u-checkbox-group v-model="weekObj.opWeekDay" placement="column" iconPlacement="right">
								<u-checkbox class="mb15" v-for="(itemY,indexY) in weekData" :key="itemY.value" :label="itemY.name"
									:name="itemY.value"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="width-3 h100p">
							<view class="h100p line"></view>
						</view>
						<view class="width-47">
							<view class="d-flex-center mb15">结束星期</view>
							<u-checkbox-group v-model="weekObj.clWeekDay" placement="column" iconPlacement="right">
								<u-checkbox class="mb15" v-for="(itemY,indexY) in weekData" :key="itemY.value" :label="itemY.name"
									:name="itemY.value"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view class="d-flex a-center j-sa mt15">
						<view class="w40p">
							<u-button size="small" text="取消" @click="popupShow = false"></u-button>
						</view>
						<view class="w40p">
							<u-button size="small" :loading="addOrUpdateLoading" type="primary" text="确定"
								@click="saveWeekButton()"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ss_switch from "@/components/ss-switch/ss-switch.vue"
	import {
		queryRuleByApp,
		queryControlListV2ByApp,
		queryPicLightByApp,
		updateRuleV2ByApp
	} from "@/api/index.js"

	export default {
		components: {
			ss_switch
		},
		data() {
			return {
				timeout: [],
				userInfo: {},
				activeMenu: "",

				zmCardData: [],
				zmCardStatus: [],
				ktCardData: [],
				ktCardStatus: [],
				ktOptions: [],

				kt_close: '/static/img/feature/children/kt_close.png',
				kt_open: '/static/img/feature/children/kt_open.png',
				lamp_close: '/static/img/feature/children/lamp_close.png',
				lamp_open: '/static/img/feature/children/lamp_open.png',

				timeIsShow: false,
				openOrCloseTime: "",
				openOrCloseType: "",
				itemObj: {},

				popupShow: false,
				weekData: [{
						name: '星期一',
						value: 'MONDAY'
					},
					{
						name: '星期二',
						value: 'TUESDAY'
					},
					{
						name: '星期三',
						value: 'WEDNESDAY'
					},
					{
						name: '星期四',
						value: 'THURSDAY'
					},
					{
						name: '星期五',
						value: 'FRIDAY'
					},
					{
						name: '星期六',
						value: 'SATURDAY'
					},
					{
						name: '星期日',
						value: 'SUNDAY'
					},
				],

				weekObj: {
					id: '',
					isUse: '',
					openTime: '',
					closeTime: '',
					model: '',
					modelName: '',
					opWeekDay: [],
					clWeekDay: [],
				},
				checked: [],
				addOrUpdateLoading: false
			};
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')

			this.queryRuleByApp()
			this.queryControlListV2ByApp()
			this.queryPicLightByApp()
		},
		mounted() {
			this.setupTimer()
		},
		methods: {
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryRuleByApp()
					_this.queryPicLightByApp()
				}, 10000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
					})
				}
			},


			async queryRuleByApp() {
				await queryRuleByApp({
					areaCode: 'r-s'
				}).then(res => {
					let tempData = res.object

					this.zmCardData = tempData.zm
					this.ktCardData = tempData.kt
				})
			},
			queryControlListV2ByApp() {
				queryControlListV2ByApp({
					deviceCode: 'DEVC2407258259342'
				}).then(res => {
					let tempData = res.object[0].list
					let arrData = []
					for (var i = 0; i < tempData.length; i++) {
						let objData = {
							parameterCode: tempData[i].parameterCode,
							value: tempData[i].command,
							text: tempData[i].commandName,
						}
						arrData.push(objData)
					}

					this.ktOptions = arrData
				})
			},
			queryPicLightByApp() {
				queryPicLightByApp({
					areaCode: 'r-s'
				}).then(res => {
					let tempData = res.object
					this.zmCardStatus = tempData.slice(0, 2)
					this.ktCardStatus = tempData.slice(2, 4)
				})
			},

			// 设置定时开关
			asyncSwitchChange(e, data) {
				const _this = this

				updateRuleV2ByApp({
					id: data.id,
					isUse: e,
					openTime: data.openTime,
					closeTime: data.closeTime,
					model: data.model,
					modelName: data.modelName,
					opWeekDay: data.opWeekDay,
					clWeekDay: data.clWeekDay,
					createBy: _this.userInfo.userCode
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							duration: 1000,
							icon: "success",
							title: res.message
						})
						this.queryRuleByApp()
					}
				})
			},

			// 设置空调模式
			selectChange(e, data) {
				const _this = this

				let objData = _this.ktOptions.find(item => {
					return item.value == e
				})

				updateRuleV2ByApp({
					id: data.id,
					isUse: data.isUse,
					openTime: data.openTime,
					closeTime: data.closeTime,
					model: objData.value,
					modelName: objData.text,
					opWeekDay: data.opWeekDay,
					clWeekDay: data.clWeekDay,
					createBy: _this.userInfo.userCode
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							duration: 1000,
							icon: "success",
							title: res.message
						})

						this.queryRuleByApp()
					}
				})
			},

			// 开启 开启时间弹窗
			openTimeFocus(data, type) {
				this.itemObj = JSON.parse(JSON.stringify(data))
				this.openOrCloseType = type

				this.$refs.datetimePicker.innerValue = data.openTime

				this.addOrUpdateLoading = false
				this.timeIsShow = true
			},
			// 开启 关闭时间弹窗
			closeTimeFocus(data, type) {
				this.itemObj = JSON.parse(JSON.stringify(data))
				this.openOrCloseType = type

				this.$refs.datetimePicker.innerValue = data.closeTime

				this.addOrUpdateLoading = false
				this.timeIsShow = true
			},
			// 保存时间
			confirmDateTime(e) {
				this.openOrCloseTime = e.value

				if (this.openOrCloseType == 'open') {
					this.itemObj.openTime = e.value
				} else {
					this.itemObj.closeTime = e.value
				}

				this.timeIsShow = false

				const _this = this
				_this.addOrUpdateLoading = true
				updateRuleV2ByApp({
					id: _this.itemObj.id,
					isUse: _this.itemObj.isUse,
					openTime: _this.itemObj.openTime,
					closeTime: _this.itemObj.closeTime,
					model: _this.itemObj.model,
					modelName: _this.itemObj.modelName,
					opWeekDay: _this.itemObj.opWeekDay,
					clWeekDay: _this.itemObj.clWeekDay,
					createBy: _this.userInfo.userCode
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							duration: 1000,
							icon: "success",
							title: res.message
						})

						this.queryRuleByApp()
						this.addOrUpdateLoading = false
					}
				})
			},

			// 打开星期弹窗
			openPopup(data) {
				this.weekObj.id = data.id
				this.weekObj.isUse = data.isUse
				this.weekObj.openTime = data.openTime
				this.weekObj.closeTime = data.closeTime
				this.weekObj.model = data.model
				this.weekObj.modelName = data.modelName
				this.weekObj.opWeekDay = data.opWeekDay ? data.opWeekDay.split(',') : []
				this.weekObj.clWeekDay = data.clWeekDay ? data.clWeekDay.split(',') : []

				this.addOrUpdateLoading = false
				this.popupShow = true
			},

			// 保存弹窗
			saveWeekButton() {
				const _this = this
				_this.addOrUpdateLoading = true

				updateRuleV2ByApp({
					id: _this.weekObj.id,
					isUse: _this.weekObj.isUse,
					openTime: _this.weekObj.openTime,
					closeTime: _this.weekObj.closeTime,
					model: _this.weekObj.model,
					modelName: _this.weekObj.modelName,
					opWeekDay: _this.weekObj.opWeekDay.join(','),
					clWeekDay: _this.weekObj.clWeekDay.join(','),
					createBy: _this.userInfo.userCode
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							duration: 1000,
							icon: "success",
							title: res.message
						})

						this.queryRuleByApp()
						this.popupShow = false
						this.addOrUpdateLoading = false
					}
				})
			},

			// tabs通知swiper切换
			tabsChange(e) {
				this.current = e.index;
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
			},


			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(11111111111)
			},

			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.width-47 {
		width: 45%;
	}

	.width-3 {
		width: 10%;
	}

	.line {
		width: 6rpx;
		background-color: #3276FF;
	}


	.content {
		display: flex;
		flex-direction: column;
		height: calc(100% - 20rpx);
		font-family: Source Han Sans CN, Source Han Sans CN-400;

		.content_item {
			background: #ffffff;
			border-radius: 8px;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
			// font-family: "黑体", "Heiti SC", "STHeiti", sans-serif;

			.leftWidth {
				width: 140rpx;
			}

			.line {
				width: 12rpx;
				height: 32rpx;
				background: #3276FF;
				border-radius: 3px;
			}

			.itemName {
				font-size: 32upx;
				color: #333333;
				font-weight: 600;
			}


			.rowName {
				font-size: 28upx;
				color: #333333;
			}

			.rowValue {
				font-size: 28upx;
				color: #666666;
			}

			/deep/ .ss-switch .ss-switch__text.ss-switch__text_off {
				right: 6px !important;
			}

			/deep/ .ss-switch .ss-switch__text.ss-switch__text_on {
				left: 8px !important;
			}
		}
	}
</style>